<template>
  <div class="node-container" v-bind="$attrs">
    <div class="node-header">
      <!-- 图标 -->
      <component :is="props.icon" class="icon-header" />
      <!-- 标题 -->
      <span class="node-title">{{ props.title }}</span>

      <!-- 三点菜单 -->
      <el-dropdown v-if="hasMoreOptions" placement="bottom-end" @command="handleCommand">
        <span class="el-dropdown-link">
          <MoreFilled class="icon-more" size="small" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="copy">复制</el-dropdown-item>
            <el-dropdown-item command="delete">删除</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts" name="NodeContainer">
import { MoreFilled } from '@element-plus/icons-vue'

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  icon: {
    type: Object,
    required: true,
  },
  hasMoreOptions: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['more-options']);
function handleCommand(command: string) {
  emit('more-options', command)
}

</script>

<style scoped></style>
